<template>
  <!-- 歌单详情页的具体渲染 -->
  <div class="topbar">
    <!-- header 给三个div设置模糊 -->
    <div class="header">
      <img :src="playList.coverImgUrl" alt="背景模糊图片" class="bg" />
      <!-- top start -->
      <div class="top">
        <div class="left">
          <van-icon name="arrow-left" @click="$router.back()" />
          <div class="name">歌单</div>
        </div>
        <div class="right">
          <van-icon name="search" />
          <van-icon name="wap-nav" />
        </div>
      </div>
      <!-- top end -->

      <!-- banner start -->
      <div class="banner">
        <div class="pic">
          <img :src="playList.coverImgUrl" alt="歌单图片" />
        </div>
        <div class="detail">
          <div class="play_list_name">{{ playList.name }}</div>
          <div class="creator">
            <img
              :src="playList.creator.avatarUrl"
              alt="歌单创建者头像"
              style="width: 30px; border-radius: 50%"
            />
            <span>{{ playList.creator.nickname }}</span>
          </div>
          <div class="description">{{ playList.description }}</div>
        </div>
      </div>
      <!-- banner end -->

      <!-- icon start -->
      <!-- 信息 分享 下载 多选 -->
      <div class="icon">
        <div class="info">
          <van-icon name="info" />
          <div class="text">信息</div>
        </div>
        <div class="share">
          <van-icon name="share" />
          <div class="text">分享</div>
        </div>
        <div class="download">
          <van-icon name="download" />
          <div class="text">下载</div>
        </div>
        <div class="more">
          <van-icon name="more" />
          <div class="text">多选</div>
        </div>
      </div>
      <!-- icon end -->
    </div>

    <!-- content start -->
    <div class="content">
      <!-- 内容顶部 ---播放 收藏 开始 -->
      <div class="content_top">
        <div class="play">
          <van-icon name="play" />
          <span class="text">播放全部<span>(共xxx首)</span></span>
        </div>
        <div class="collect">
          <van-icon name="collect" />
          <div class="text">
            <van-button type="primary">+收藏<span>xxxx</span></van-button>
          </div>
        </div>
      </div>
      <!-- 内容顶部------播放 收藏 结束 -->

      <!-- 列表区域开始 -->
    </div>
    <!-- content end -->
  </div>
</template>

<script>
import { reactive, ref } from "@vue/reactivity";
// 引入路由
import { useRouter } from "vue-router";

export default {
  setup(props) {
    let playList = props.playList;
    console.log(playList);
    return {
      playList,
    };
  },
  props: ["playList"],
};
</script>

<style lang="less" scoped>
.top {
  // background-color: orange;
  display: flex;
  justify-content: space-between;
  padding: 10px;
  font-size: 20px;
  font-weight: bold;
  color: #fff;

  // 设置模糊背景
  .header {
    background-image: url("https://p1.music.126.net/6y-UleORITEDbvrOLV0Q8A==/5639395138885805.jpg");
  }

  .left {
    width: 80px;
    margin-left: 10px;
    display: flex;
    justify-content: space-between;
    align-items: center;

    .name {
      font-size: 20px;
    }
  }
  .right {
    width: 50px;
    margin-right: 10px;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
}

.banner {
  height: 200px;
  width: 100%;
  // background-color: red;
  display: flex;
  justify-content: space-between;
  align-items: center;

  .pic {
    // padding-left: 8px;
    margin-left: 20px;
    width: 40%;
    height: auto;
    border-radius: 10px;
    overflow: hidden;
    img {
      width: 100%;
      height: 100%;
    }
  }
  .detail {
    width: 70%;
    padding: 10px;

    .play_list_name {
      color: #fff;
      font-size: 18px;
      font-weight: bold;
    }
    .description {
      font-size: 12px;
      color: #fff;
    }
  }
}
.icon {
  // background-color: blue;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.content_top {
  background-color: yellow;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.header {
  position: relative;
  img.bg {
    width: 375px;
    height: 100%;
    filter: blur(10px);
    position: absolute;
    top: 0px;
    left: 0;
    z-index: -1;
    // margin: 0 10px;
  }
}
</style>
